<template>
	<view class="register_warp">
		<Header left-path-type="navigateTo" leftPath="/pages/login/login"/>
		<view class="register_content_warp">
			<view class="_content_title_warp">{{$t('register.title')}}</view>
			<view class="_content_warp">
				<view class="_content_setp_warp">
					<view :class="stepCurrent >= 0 ?'_content_setp_item_warp _content_setp_item_sel_warp':'_content_setp_item_warp'">1</view>
					<view :class="stepCurrent >= 2 ? '_content_setp_fg_warp _content_setp_fg_sel_warp':'_content_setp_fg_warp'"></view>
					<view :class="stepCurrent >= 2 ?'_content_setp_item_warp _content_setp_item_sel_warp':'_content_setp_item_warp'">2</view>
					<view :class="stepCurrent >= 4 ? '_content_setp_fg_warp _content_setp_fg_sel_warp':'_content_setp_fg_warp'"></view>
					<view :class="stepCurrent >= 4 ?'_content_setp_item_warp _content_setp_item_sel_warp':'_content_setp_item_warp'">3</view>
					<view :class="stepCurrent >= 5 ? '_content_setp_fg_warp _content_setp_fg_sel_warp':'_content_setp_fg_warp'"></view>
					<view :class="stepCurrent >= 5 ?'_content_setp_item_warp _content_setp_item_sel_warp':'_content_setp_item_warp'">4</view>
				</view>
				<!-- 第一步 -->
				<view class="_content_info_warp" v-if="stepCurrent === 0">
					<view class="msg_1">{{$t('register.step1.title')}}</view>
					<view class="msg_2">
						<text>{{$t('register.step1.title2')}}</text><br/>
						<text>{{$t('register.step1.title3')}}</text>
					</view>
					<up-input
					    :placeholder="$t('register.step1.name')"
					    border="surround"
					    v-model="form.name"
						:customStyle="inputCss"
					></up-input>
					<view class="policy_warp">
					  	<up-checkbox
					  		name="isCheck"
					  		usedAlone
					  		v-model:checked="isPolicy"
					  		shape="circle"
					  		activeColor="#265FFF"
					  		iconSize="18"
							labelSize="10"
					  	>
					  		<template #label>
					  			<text>{{$t('login.policy1')}}</text>
					  			<text class="policy_a_warp" @click="jumpUserAgreement">《{{$t('login.policy2')}}》</text>
					  			<text>、</text>
					  			<text class="policy_a_warp" @click="jumpPrivacyAgreement">《{{$t('login.policy3')}}》</text>
					  			<text>、</text>
					  			<text class="policy_a_warp" @click="jumpProductAgreement">《{{$t('login.policy4')}}》</text>
					  		</template>
					  	</up-checkbox>
					</view>
				</view>
				<!-- 第二步 -->
				<view  class="_content_info_warp" v-if="stepCurrent === 1">
					<view class="msg_1">{{$t('register.step2.title')}}</view>
					<view class="msg_2">
						<text>{{$t('register.step2.inviteCode')}}</text>
					</view>
					<up-input
						:placeholder="$t('register.step2.title')"
						border="surround"
						v-model="form.inviteCode"
						:customStyle="inputCss"
					></up-input>
				</view>
				<!-- 第三步 -->
				<view class="_content_info_warp" v-else-if="stepCurrent === 2">
					<view class="msg_1">{{$t('register.step3.title')}}</view>
					<view class="msg_2">
						<text>{{$t('register.step3.content')}}</text>
					</view>
					<view class="code_input_warp">
						<up-code-input v-model="form.password" :focus="true" size="42"></up-code-input>
					</view>
					<view class="msg_2">
						<view class="msg_2_item">
							<view class="msg_2_item_yd"></view>
							<view>{{$t('register.step3.content.msg1')}}</view>
						</view>
						<view class="msg_2_item">
							<view class="msg_2_item_yd"></view>
							<view>{{$t('register.step3.content.msg2')}}</view>
						</view>
						<view class="msg_2_item">
							<view class="msg_2_item_yd"></view>
							<view>{{$t('register.step3.content.msg3')}}</view>
						</view>
					</view>
				</view>
				<!-- 第四步 -->
				<view  class="_content_info_warp" v-if="stepCurrent === 3">
					<view class="msg_1">{{$t('register.step4.title')}}</view>
					<view class="msg_2">
						<text>{{$t('register.step4.content')}}</text>
					</view>
					<view class="code_input_warp">
						<up-code-input v-model="form.password2" :focus="true" size="42"></up-code-input>
					</view>
				</view>
				<!-- 第五步 -->
				<view  class="_content_info_warp" v-if="stepCurrent === 4">
					<view class="msg_1">{{$t('register.step5.title')}}</view>
					<view class="msg_2">
					</view>
					<view class="moblie_">
						<view @click="phoneCountryShow = true;" class="moblie_phone_country">
							{{phoneCountrySel && Object.keys(phoneCountrySel).length !==0 ? phoneCountrySel.key : $t('common.select')}}
							<up-image v-if="phoneCountryShow" src="/static/comm/but.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
							<up-image v-else src="/static/comm/right_2.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
						</view>
						<up-input
							:placeholder="$t('common.mobile.placeholder')"
							border="surround"
							v-model="form.mobile"
							:customStyle="inputCss"
						></up-input>
					</view>
				</view>
				<!-- 第六步 -->
				<view class="_content_info_warp" v-if="stepCurrent === 5">
					<view class="msg_1">{{$t('register.step6.title')}}</view>
					<view class="msg_2">
						<text>{{$t('register.step6.content')}}</text>
					</view>
					<up-input
						:placeholder="$t('mine.cardholder.add.email.placeholder')"
						border="surround"
						v-model="form.email"
						:customStyle="inputCss"
					></up-input>
				</view>
				
				<!-- 第七步 -->
				<view  class="_content_info_warp" v-if="stepCurrent === 6">
					<view class="msg_1">{{$t('register.step6.title')}}</view>
					<view class="msg_2">
						<text>{{$t('register.step6.content')}}</text>
					</view>
					<InputCodeComm @getCode="getEmailCode" :codeNumberRef="form.email" :type="SMS_TYPE.REGISTER"/>
					<view class="email-msg-warp">{{$t('common.email.msg')}}</view>
				</view>
				<view class="but_comm_warp" @click="checkStepClick('next')">
					{{$t('common.next.step')}}
				</view>
				<view class="last_step_but_comm_warp" @click="checkStepClick('last')" v-if="stepCurrent>0">
					{{$t('common.last.step')}}
				</view>
			</view>
			<!-- 国码选择 -->
			<up-picker
				:show="phoneCountryShow" 
				ref="uPickerRef" 
				:columns="phoneCountryOption" 
				@confirm="phoneCountryConfirm" 
				keyName="key"
				itemHeight="34"
				@cancel="phoneCountryShow=false"
				@close="phoneCountryShow=false"
				:cancelText="$t('common.confirm')"
				:confirmText="$t('common.cancel')"
			></up-picker>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import { isProxy } from 'vue';
	import Header from '@/components/header_comm.vue';
	import CryptoJS from 'crypto-js';
	import { getPhoneCountryCode } from '@/api/common.js'
	import { emailRegister } from '@/api/auth.js'
	import InputCodeComm from '@/components/input-code-comm.vue';
	import { SMS_TYPE } from '@/utils/enumUtils.js';
		
	import { setStorageFun,TOKEN_NAME,USER_KEY,USER_DATA,USER_LOGIN_TIME } from '@/utils/auth.js';
		
		
	export default {
		components:{Header,InputCodeComm},
		data() {
			return {
				stepCurrent:0,
				form:{
					name:'',// 姓名
					inviteCode:"",// 邀请码
					email:'',// 邮箱
					code:'',// 验证码
					password:'',// 密码（一次MD5加密）
					password2:'',// 密码（一次MD5加密）
					mobile:'',// 手机号码
					countryCode:'',// 手机号码国码
				},
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding": "16rpx",
				},
				isPolicy:false,
				phoneCountryOption:[],
				phoneCountryShow:false,
				phoneCountrySel:{},
			};
		},
		computed: {
		   SMS_TYPE() {
		     return SMS_TYPE;
		   }
		 },
		mounted() {
			this.getPhoneCountryCode();
		},
		methods: {
			async getPhoneCountryCode(){
				const resp = await getPhoneCountryCode();
				if(resp && resp.bizcode === 100){
					const data = resp.data;
					if(data && data.length !==0){
						this.phoneCountrySel = data[0];
						this.form.countryCode = data[0].value;
					}
					this.phoneCountryOption = [data] || [];
				}
			},
			
			// 下一步
			checkStepClick(step){
				// 
				let stepCurrent = this.stepCurrent;
				console.log("当前步骤",stepCurrent)
				if(step === "next"){
					const checkResult = this.checkParams(stepCurrent);
					if(checkResult){
						stepCurrent = stepCurrent+1;
					}
				}else if(step === "last"){
					stepCurrent = stepCurrent-1;
				}
				if(stepCurrent === 7){
					this.jumpOk();
				}else{
					this.stepCurrent = stepCurrent;
				}
			},
			checkParams(step){
				let result = true;
				const form = this.form;
				// 第一步
				if(step === 0){
					if(!form.name){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('register.step1.name.placeholder'),
						});
						return false;
					}
					if(!this.isPolicy){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('login.policy.placeholder'),
						});
						return false;
					}
				}
				// 第三步
				if(step === 2){
					if(!form.password){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('register.step3.title.placeholder'),
						});
						return false;
					}
				}
				// 第四步
				if(step === 3){
					if(!form.password2){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('register.step3.title.placeholder'),
						});
						return false;
					}
					if(form.password !== form.password2){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('register.step4.title.placeholder'),
						});
						return false;
					}
				}
				// 第五步
				if(step === 4){
					if(!form.countryCode){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('register.step5.country.code.placeholder'),
						});
						return false;
					}
					if(!form.mobile){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('common.mobile.placeholder'),
						});
						return false;
					}
				}
				// 第六步
				if(step === 5){
					if(!form.email){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('register.step6.title.placeholder'),
						});
						return false;
					}
				}
				// 第七步
				if(step === 6){
					if(!form.code){
						this.$refs.uToastRef.show({
							type: 'error',
							message: this.$t('register.step7.placeholder'),
						});
						return false;
					}
				}
				return true
			},
			phoneCountryConfirm(item){
				const selectData = item.value[0]
				this.phoneCountrySel = selectData;
				this.form.countryCode = selectData.value;
				this.phoneCountryShow = false;
			},
			// 获取邮箱验证码
			async getEmailCode(code){
				if(code){
					this.form.code = code;
				}
			},
			/**
			 * 提交注册
			 */
			async jumpOk(){
				const form = this.form;
				const params = {
					email:form.email,
					code:form.code,
					name:form.name,
					countryCode:form.countryCode,
					mobile:form.mobile,
					inviteCode:form.inviteCode,
					password:CryptoJS.MD5(form.password).toString(),
				}
				console.log("params",params);
				const resp = await emailRegister(params);
				if(resp && resp.bizcode === 100){
					const data = resp.data;
					setStorageFun(TOKEN_NAME,data.token);
					setStorageFun(USER_KEY,'');
					const userInfo = {
						appUrl:data.appUrl,
						avatarUrl:data.avatarUrl,
						inviteCode: data.inviteCode,
						name: data.name,
						userId: data.userId,
						email: data.email,
					};
					setStorageFun(USER_DATA,userInfo);
					// 当前登录得时间戳
					let currentTimeStamp = new Date().getTime();
					setStorageFun(USER_LOGIN_TIME,currentTimeStamp);
					this.$refs.uToastRef.show({
						type: 'success',
						message: resp.msg,
					});
					setTimeout(()=>{
						uni.navigateTo({
						    url: '/pages/register_ok/register_ok',
						})
					},2000);
				}
			},
			jumpHome(){
				uni.switchTab({
					url:"/pages/home/home",
				})
			},
			// 用户协议
			jumpUserAgreement(){
				uni.navigateTo({
					url: '/pages/mine_user_agreement/mine_user_agreement?backPath=register'
				})
			},
			// 隐私协议
			jumpPrivacyAgreement(){
				uni.navigateTo({
					url: '/pages/mine_privacy_agreement/mine_privacy_agreement?backPath=register'
				})
			},
			// 售后保障协议
			jumpProductAgreement(){
				uni.navigateTo({
					url: '/pages/mine_product_agreement/mine_product_agreement?backPath=register'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.register_warp{
	height: calc(100vh - 0rpx);
	overflow: auto;
	.register_content_warp{
		padding: 50rpx;
		._content_title_warp{
			font-weight: bold;
			font-size: 44rpx;
			color: #111111;
		}
		._content_warp{
			margin-top: 40rpx;
		}
		._content_setp_warp{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		._content_setp_item_warp{
			width: 80rpx;
			height: 80rpx;
			background: #EEEEEE;
			border-radius: 50%;
			font-weight: bold;
			font-size: 36rpx;
			color: #666666;
			text-align: center;
			line-height: 80rpx;
		}
		._content_setp_item_sel_warp{
			background: $app-policy-color;
			color: #FFFFFF;
		}
		._content_setp_fg_warp{
			width: 104rpx;
			height: 2rpx;
			border-bottom: 2px solid #EEEEEE;
		}
		._content_setp_fg_sel_warp{
			border-bottom: 2px solid $app-policy-color;
		}
		._content_info_warp{
			margin-top: 40rpx;
			.msg_1{
				font-weight: bold;
				font-size: 44rpx;
				color: #111111;
			}
			.msg_2{
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #333333;
				line-height: 42rpx;
				margin-bottom: 10rpx;
				.msg_2_item{
					display: flex;
					align-items: center;
				}
				.msg_2_item_yd{
					width: 8rpx;
					height: 8rpx;
					background: #000000;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
			.msg_3{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				text-align: center;
				margin-top: 40rpx;
			}
			.moblie_{
				display: flex;
				align-items: center;
				background-color: #F3F3F3FF;
				border-radius: 20rpx;
				padding: 0 0 0 20rpx;
				.moblie_phone_country{
					border-right: 1rpx solid #9E9E9E;
					padding-right: 10rpx;
					display: flex;
				}
			}
		}
		.policy_warp{
			margin-top: 20rpx;
		}
		.but_comm_warp{
			margin-top: 80rpx;
		}
		.last_step_but_comm_warp{
			margin-top: 20rpx;
		}
		.code_input_warp{
			margin-top: 30rpx;
		}
	}
	::v-deep .u-steps-item__wrapper__circle.data-v-3c8d19a1 {
	    width: 30px !important;
	    height: 30px !important;
	}
	::v-deep .u-code-input.data-v-10e44dac {
	    justify-content: space-between;
	}
	::v-deep .u-code-input__item.data-v-10e44dac {
	    border-radius: 8px;
	}
}
</style>
